<template>
    <div class="Articlecomment">
        <div class="title">
            发表评论
        </div>
        <div class="postComment">
            <Avatar  :mode=0 :size="30" />
        <v-textarea
            v-model="content"
            outlined
            filled
            label="请输入评论"
            auto-grow
            color:grey
            style="margin-left:1vw"
        ></v-textarea>
        </div>
        <v-btn rounded height=24px width="60px" depressed color="error" style="float:right" @click="postComment"><span style="font-size:16px;color:white">发表</span></v-btn>
        <div class="title" style="margin-top:4vh">
            评论列表
        </div>
        <span v-if="comments.length===0" style="display:flex;justify-content:center">暂无评论</span>
        <div v-if="comments.length>0" class="allComment">
        <v-row v-for="(reply,i) in comments" :key="i">
        <v-col cols="1"><Avatar v-bind:src="reply.authorAvatar"></Avatar></v-col>
        <v-col cols="11">
          <v-card class="tmp-card">
            <v-card-text>
              <span style="font-weight: bolder;color: black">{{reply.authorName}}</span>
              &nbsp;
              <span v-if="reply.isOfficial" style="color: white;background: #ff5151;font-family: 'Adobe 宋体 Std L';border-radius: 2px">置顶</span>
              &nbsp;
              <span>发布于{{reply.publishDate.substring(5,10)}}&nbsp;{{reply.publishDate.substring(11,16)}}</span>
            </v-card-text>
            <DocEditor :content="reply.content" :read_only="true"></DocEditor>
            <replyDialog :reply="reply"></replyDialog>
          </v-card>
          <div v-if="reply.children.length!=0" style="margin-top: 3%;">
            <v-row v-for="(child,i) in reply.children" :key="i">
              <v-col cols="1"><Avatar v-bind:src="child.authorAvatar"></Avatar></v-col>
              <v-col cols="11">
                <v-card class="tmp-card">
                  <v-card-text>
                    <span style="font-weight: bolder;color: black">{{child.authorName}}</span>
                    &nbsp;
                    <span v-if="child.replyTo.length!=0" style="color: #2196F3">回复:@{{child.replyTo}}</span>
                    &nbsp;
                    <span>发布于{{child.publishDate.substring(5,10)}}&nbsp;{{child.publishDate.substring(11,16)}}</span>
                  </v-card-text>
                  <DocEditor :content="child.content" :read_only="true"></DocEditor>
                </v-card>
              </v-col>
            </v-row>
          </div>
        </v-col>

      </v-row>
        </div>
    </div>

</template>

<script>
import Avatar from '../common/Avatar/Avatar.vue';
import DocEditor from "@/components/views/common/DocEditor";
import replyDialog from '../article/replyArticle'
export default {
    components:{
        Avatar,DocEditor,replyDialog
    },
    data(){
        return{
            content:"",
            articleId:"",
            comments:[]
        }
    },
    methods:{
        postComment(){
            let userId = this.$store.getters.getUserId;
            let passageId = this.$route.params.id;
            this.$api.article.comment(this.content,userId,passageId).then(res=>{
                let result =res;
                console.log(result)
                if(res.success){
                    this.$router.go(0)
                }
                else
                    this.$Message.fail("评论失败")
            })
        }
    },
    mounted(){
        let id = this.$route.params.id;
        console.log(id)
        this.$api.article.show(id).then(res=>{
            let result = res;
            if(result.success){
                this.comments=result.data;
                console.log(this.comments)
            }
        })
    }
}
</script>

<style scoped>
.title{
    height:50px;
    font-size:24px
}
.postComment{
   display: flex;
   align-content: center;
   align-items: center;
  flex-direction:row;
}
.Articlecomment{
    border-color: white;
}
.showComment{
    display: flex;
    align-content: center;
    align-items: center;
}
.allComment{
    display: flex;
    align-content: center;
    align-items: center;
}
</style>